<template>
  <div>
    <Parallax>
      <div slot="parallax-slow">
        <img
          src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=5b02a2de7f5d153bf31d6b799b6b2f92"
          alt=""
        />
      </div>

      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
      <img
        src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd"
        alt=""
      />
    </Parallax>
  </div>
</template>

<script>
import Parallax from '@/components/parallax';
export default {
  name: 'paxx',
  components: {
    Parallax
  },
  data() {
    return {
      scrollTopValue: 0,
      opacity: 0,
      ANCHOR_SCROLL_TOP: 160,
      navBarStyle: {}
    };
  },
  methods: {
    onScrollTop() {
      window.addEventListener(
        'scroll',
        () => {
          //获取当前页面滚动的距离
          this.scrollTopValue =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

          // 计算 navBar 背景颜色（navBar 背景透明度）
          this.opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP;

          // 指定navBar的插槽样式
          if (this.opacity >= 1) {
            //处理滑动结束之后的样式操作，一般为高亮操作
          } else {
            // 处理滑动尚未结束后的操作
          }
          // 根据透明比例设置 navBar 的背景颜色
          this.navBarStyle.background = `rgba(255,255,255,${this.opacity})`;
        },
        false
      );
    }
  }
};
</script>

<style scoped>
img {
  width: 100%;
}
</style>
